<template>
  <view class="list">
    <!-- 视频列表 -->
    <view v-for="(video, index) in videoList" :key="index" class="video-item">
      <!-- 视频 -->
      <video :src="video.fileUrl" style="width: 100%;" controls @play="increaseViewCount(index)"></video>
      <view class="content">
        <!-- 标题 -->
        <view class="title">{{ video.description }}</view>
        <!-- 简介 -->
        <view class="info">{{ video.info }}</view>
        <!-- 日期 -->
        <view class="date">创建日期：{{ video.createdTime }}</view>
        <!-- 浏览次数 -->
        <view class="views">浏览次数：{{ video.views }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { resourcesList } from '../../common/api';
export default {
  data() {
    return {
      // 视频列表数据
      videoList: [
      ]
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await resourcesList();
      console.log(res, 111);
      // 假设接口返回的数据中没有浏览次数字段，这里为每个视频添加初始浏览次数为0
      res.forEach(video => {
        video.views = 0;
      });
      this.videoList = res;
    },
    increaseViewCount(index) {
      // 当视频播放时，增加浏览次数
      if (this.videoList[index]) {
        this.videoList[index].views++;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.list {
  padding: 32rpx;

 .video-item {
    margin-bottom: 20px;
    background-color: #f5f5f5;

   .content {
      padding: 32rpx;
    }
   .title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 10px;
      // text-align: center;
    }

   .info {
      font-size: 28rpx;
      color: #666;
    }

   .date {
      font-size: 24rpx;
      color: #999;
      text-align: right;
    }

   .views {
      font-size: 24rpx;
      color: #999;
      text-align: right;
    }
  }
}
</style>